/**
 * 主页Header. 
 */
var header = (function(){   
     
    var _defHeaderConfig = {
        renderTo : '#header',
        isShowProfile : true,
        isShowLeftToolbar : true,
        isShowRightToolbar : true        
    };
    
    return Observable.create({
        init : function(headerConfig, cb){            
            var _this = this;  
            this.config = $.extend(true, {}, _defHeaderConfig, headerConfig);    
            this.$wrapper = $(this.config['renderTo']);
            
            this.$wrapper.html([
                '<div class="userProfile left" style="width: 220px;"></div>',
                '<div class="headerToolbarLeft" style="float: left;"></div>',
                '<div class="headerToolbar right"></div>'
            ].join(''));

            /**
             * 呈现用户头像资料. 
             */
            this.renderUserProfile();     
            
            if(this.config['isShowProfile']){
                this.$userProfile.css({
                    'cursor' : 'pointer'
                });                   
                this.$userProfile.delegate('.userIcon', 'click', function() {  
                    _this.$userProfile.find('.userProfileTip').fadeToggle();
                    return false;
                });
            }
            
            ujs.util.session.on('userInfoChanged', function(newUserInfo){
                _this.renderUserProfile();                   
            });            
            /**
             * 顶部左侧工具条. 
             */       
            this.$toolbarLeft = $('.headerToolbarLeft');
            if(this.config['isShowLeftToolbar'] && this.$toolbarLeft.isExist()){
                this.toolbarLeft = $('.headerToolbarLeft').toolbar({
                    cls : 'headerToolbarLeft'
                }).data('toolbar'); 
            }
            /**
             * 右侧工具条. 
             */     
            this.$toolbarRight = $('.headerToolbar'); 
            if(this.$toolbarRight.isExist()){              
                this.$toolbarRight.html('');
                this.toolbarRight = $('.headerToolbar').toolbar({
                    cls : 'headerToolbar'
                }).data('toolbar');                       
                //退出。
                this.toolbarRight.addImageButton({
                    id : 'exit',
                    label : lan('sys.exit'),
                    labelPos : 'bottom',
                    image : ujs.getRes('app/im/images/header/exit.png'),
                    isShowLabel : true,
                    cls : 'icon imageBtn',
                    onClick : function() { 
                        bubble.confirm('Are you sure exit?', function(){
                            if(page.pipe) page.pipe.end();
                            $(document.body).fadeOut(200, function(){
                                page.biz.logout(function(){
                                    sessionStorage.removeItem('aclsid');
                                    sessionStorage.removeItem('s');
                                    
                                    $.cookie('pwd', '', {
                                        domain : 'accounts.acucom.org'
                                    });
                                                                
                                    //正常退出时，需要注销beforeunload事件，以免confirmation窗体弹出。
                                    window.onbeforeunload = null;
                                    window.onunload = null;        
                                    ujs.util.debug.log({msg:'toLoginPage:user exit'});                            
                                    ujs.browser.loc.toLoginPage(false); 
                                });
                            }); 
                        });                    
                        return false;
                    }
                });
            }
            cb && cb.call(this);
        }, 
        /**
         * 呈现用户资料区域. 
         * @param {Object} userInfo
         */
        renderUserProfile : function(userInfo){
            var userProfileTmp = [
                '<div class="profileZone">',
                    '<div style="width:60px;height:50px;float:left;text-align: center;" class="hvBox">',
                        '<img class="userIcon" src="<%=o.icon%>" />',
                    '</div>',
                    '<h2 title="<%=o.name.safeString() %>" class="userName ellipsis breakWord"><%=o.name.safeString()%></h2>',
                    '<div class="userProfileTip" style="display:none;">',
                        '<div style="width:110px;height:110px;float:left;text-align: center;" class="hvBox">',
                            '<img style="max-width:110px;max-height:110px;" src="<%=o.icon%>" />',
                        '</div>',
                        '<div style="float:right;width:150px;">',
                            '<h4 class="breakWord ellipsis" title="<%= o.name %>" style="font-size: 16px;letter-spacing: 1px;margin-bottom: 5px;"><%=o.name%></h4>',
                            '<div style="height: 75px;overflow: auto;margin-bottom: 2px;"><%=o.description%></div>',
                            '<div><button onclick=window.open("/rest/apis/user") style="background: #AFA7A7;padding: 3px 5px;border-radius: 3px;color: #fff;margin-left: 72px;">Edit Profile</button></div>',
                        '</div>', 
                    '</div>',
                '</div>' 
            ];
             
            userInfo = userInfo || ujs.util.session.getCurrentUserInfo();
            
            if(userInfo['icon']){
                userInfo['icon'] = ujs.browser.loc.addQuery(userInfo['icon'], {w:200}); 
            }
            this.$userProfile = $('.userProfile');            
            this.$userProfile.html(tmpl(userProfileTmp, userInfo));   
            this.$userProfile.find('.userProfileTip').hideOnClickDoc();
            return this.$userProfile;         
        }
    });
})();